<template>
<div class="MVBox" v-if="MVmessage.length!=0">
  <div  class="MVList" v-for="item in MVmessage" :key="item">
      <img class="img" v-lazy="item.imgurl" @click="playMV(item.id)">
     <play-circle-filled  class="i" @click="playMV(item.id)"/>
      <p>{{ item.name }}</p>
      <p>{{ item.artistName}}</p>
  </div>
</div>
  <div v-else>
<!--    <img src="../../../assets/img/img_5.png" class="empty">-->
    <p style="text-align: center">无数据</p>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import axios from "axios";
import {ref} from "vue";
import {useSongsStore,useMVStore} from "@/Store/Pinia/pinia"
import {baseURL} from "@/request/index.js";
import {storeToRefs} from "pinia";
const songsStore =useSongsStore();
const mvstore=useMVStore();
const router = useRouter();
const {MVmessage}=storeToRefs(songsStore)
const mvurl=ref();
function playMV(mvid){
  axios.post(baseURL+"/mv/url?id=" + mvid).then((res) => { //获取MV地址
    mvurl.value = res.data.data.url;
  }).then(()=>{
    mvstore.$patch((state)=>{
      state.mvid=mvid;
    })
    router.push({name:'songsMV',params:{mvurl:mvurl.value}})
  })
}
</script>

<style scoped>


.MVBox{
  display: flex;
  flex-wrap:wrap;
  margin-left: 80px;
}

.MVBox .MVList{
   width: 250px;
   height: 250px;
   margin-right: 30px;
   margin-top: 20px;
  position: relative;
  transition:All 0.4s ease-in-out;
}
.MVBox .MVList:hover{
  transform:translate(0,-20px);
}
.MVBox .MVList .i{
  color: white;
  position: absolute;
  left: 80px;
  top:40px;
  opacity:0;
  font-size: 80px;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: opacity;
  -webkit-animation-name: xing;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 2s;
}
.MVBox .MVList .i:hover{
  opacity: 1;
}
.MVBox .MVList .img{
   width: 220px;
  height: 180px;
}

.empty{
}
</style>